<template>
	<view class="visitor-detail-container">
		<u-action-sheet :actions="list" @select="selectClick" :closeOnClickOverlay="true" @close="closeAction"
			:show="show"></u-action-sheet>
		<view class="visitor-info">
			<view class="info-text">
				<view class="title">
					访客姓名
				</view>
				<view class="value">{{visitor.visitorName}}</view>

				<view class="title">
					访客手机号
				</view>
				<view class="value">{{visitor.phoneNumber}}</view>

				<view class="title">
					身份证
				</view>
				<view class="value">{{visitor.visitorIdNumber}}</view>

			</view>
			<view class="info-img">
				<u--image width="100" height="100" :src="'https://www.gzzyue.com/prod-api/'+visitor.visitorPhotos">
				</u--image>
			</view>


		</view>

		<view class="other-info">
			<view class="title">
				预约时间
			</view>
			<view class="value">{{visitor.appointmentName}}</view>

			<view class="title">
				当前状态
			</view>
			<view class="value">
				<u-tag :text="visitor.state==1?'待访问':(visitor.state==2?'待审核':(visitor.state==3?'已完成':'已失效'))"
					:type="visitor.state==1?'success':(visitor.state==2?'warning':(visitor.state==3?'info':'error'))"
					size="mini">
				</u-tag>
			</view>

			<view class="title">
				到校时间
			</view>
			<view class="value">{{visitor.schoolTime}}</view>


			<view class="title">
				同行人
			</view>
			<view class="value">{{visitor.peer}}</view>

			<view class="title">
				车牌号
			</view>
			<view class="value">{{visitor.vehicleInformation}}</view>

			<view class="title">
				被访问人
			</view>
			<view class="value">{{visitor.intervieweeName}}</view>

			<view class="title">
				被访问人手机号
			</view>
			<view class="value">{{visitor.intervieweePhoneNumber}}</view>


		</view>

		<view class="state-info">
			<u-button text="更改状态" type="error" @click="openState"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visitor: {},
				// id:0,
				title: '标题',
				list: [{
						name: '待访问',
						state: 1
					},
					{
						name: '待审核',
						state: 2
					},
					{
						name: '已完成',
						state: 3
					},
					{
						name: '已失效',
						state: 4,
					}

				],
				show: false
			}
		},
		onLoad(option) {
			// this.id=option.id
			console.log('id', option.id)
			this.getVisitDetail(option.id)
		},
		methods: {
			closeAction() {
				this.show = false
			},
			openState() {
				this.show = true
			},
			selectClick(item) {
				console.log(item.state)
				// if(index.name==='待审核'){
				// 	state=1
				// }
				this.changeState(this.visitor.id, item.state)
			},
			changeState(id, state) {

				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/visitToday',
					method: 'PUT',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					data: {
						// id:id,
						// state:state,
						// 当变量名与属性值一样时，可以简写
						id,
						state
					},
					success: (res) => {

						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								// this.getVisitDetail(id)
								this.visitor.state = state
								uni.$emit('change', {
									id,
									state
								})
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},


			getVisitDetail(id = 0) {

				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/visitToday/' + id,
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {

						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								this.visitor = res.data.data
								console.log('visitor:', res);
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.visitor-detail-container {
		.visitor-info {
			display: flex;
			flex-direction: row;
			border: 1px solid #ffaa00;
			border-radius: 15px;
			margin: 10px;
			padding: 5px;
			justify-content: space-between;
			padding: 10px;

			.info-text {
				.title {
					color: #ffaa00;
					margin-top: 5px;
					&:nth-child(1){
						margin-top: 0;
					}
				}
			}

			.info-img {}
		}

		.other-info {
			justify-content: space-between;
			border: 1px solid lightblue;
			border-radius: 15px;
			margin: 10px;
			padding: 10px;
			.title {
				color: #55aaff;
				margin-top: 5px;
			}
		}
	}
</style>
